/*color*/
$--color-sub-primary: #7dbbed; /*次要颜色*/
$--color-success: #79d5ac; /*成功颜色*/
$---html-background-color: hsl(0deg 0% 96%); /*html 背景颜色*/

/*header*/
$--app-header-height: 52px; /*header高度*/
$--app-header-background-color: #fff;
$--app-header-font-color: #000; /*header 头部字体颜色*/
$--app-header-border-color: #dcdcdc;

/*menu*/
$--app-menu-width: 210px; /*app 左侧菜单宽度*/
$--app-menu-height: 40px; /*菜单高度*/
$--app-menu-width-is-collapse: 65px;
$--app-menu-side-bg: #020202; // 左侧背景颜色

/*nav bar*/
$--app-nav-tag-border-color: #dddedf; /*nav边框*/
$--app-nav-height: 34px; /*导航栏高度*/
$--app-nav-background-color: #fff; /*导航栏背景颜色  f9f9f9*/
$--app-nav-item-background-color-active: $--color-primary; /*tag 选中时背景颜色*/
$--app-nav-item-background-color-inactive: #fff; /*tag 未选中时背景颜色*/

/*footer*/
$--app-footer-height: 45px;

.layout--default {
  .g-layout-default {
    @mixin g-app__header() {
      width: 100%;
      background: $--app-header-background-color; // 1e1e1e
      color: $--app-header-font-color;
      box-shadow: 0 1px 0 rgb(0 21 41 / 8%);
      //border-bottom: 1px solid $--app-header-border-color;
      @include flex-vertical-center($--app-header-height);
      padding: 0 20px;
      line-height: $--app-header-height;
      box-sizing: border-box;
      position: relative;
      justify-content: space-between;
    }

    @mixin g-app__header-left() {
      display: flex;
      flex-shrink: 0;
      @include flex-vertical-center($--app-header-height);
      .g-el-icon-s {
        font-size: 18px;
        cursor: pointer;
        color: lighten($--app-header-font-color, 30%);
        margin-right: 10px;
      }
      .el-breadcrumb {
        @include flex-vertical-center($--app-header-height);
        padding: 0 30px;
        font-weight: 700;
        font-size: 14px;
        min-width: 80px;
        .el-breadcrumb__separator {
          font-size: 14px;
          color: #dcdee2;
        }
        .el-breadcrumb__item {
          @include flex-vertical-center($--app-header-height);
          .el-breadcrumb__inner {
            i {
              vertical-align: middle;
            }
            span {
              padding-left: 6px;
              vertical-align: middle;
            }
          }
          &:not(:nth-last-of-type(1)) {
            span {
              font-weight: normal;
              color: #999;
            }
          }
          &:nth-last-of-type(1) {
            span {
              font-weight: bold;
            }
          }
        }
      }
      .g-logo__wrap {
        @include flex-center();
        white-space: nowrap;
        font-size: 16px;
        margin-left: 8px;
        padding-right: 20px;
        height: $--app-header-height;
        color: $--app-header-font-color;
        width: fit-content;
        box-sizing: border-box;

        .g-logo-title {
          font-size: 20px;
          line-height: 55px;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
          margin-left: 10px;
          font-family: cursive;
        }
      }
    }

    @mixin g-app__header-right() {
      display: flex;
      .g-icon-refresh__wrap {
        @include flex-vertical-center($--app-header-height);
        .el-icon-refresh {
          font-size: 18px;
          padding: 0 20px;
          cursor: pointer;
          vertical-align: middle;
          @include flex-vertical-center($--app-header-height);
        }
        .icon-refreshing {
          animation: spin 600ms infinite linear;
          animation-play-state: running;
        }
      }
      .g-full-screen-wrap {
        .el-icon-full-screen {
          font-size: 18px;
          cursor: pointer;
          color: $--app-header-font-color;
          @include flex-vertical-center($--app-header-height);
        }
      }
      .g-version__wrap {
        padding: 0 0 0 10px;

        span {
          font-size: 12px;
          font-style: italic;
          white-space: nowrap;
        }

        &:before {
          position: relative;
          top: 2px;
        }
      }
      .g-avatar__wrap {
        color: $--app-header-font-color;
        height: 100%;
        @include flex-vertical-center($--app-header-height);
        font-size: 14px;
        margin-left: 12px;
        span:first-child {
          cursor: pointer;
          @include flex-vertical-center($--app-header-height);
          .g-avatar {
            font-size: 28px;
            color: $--app-header-font-color;
            margin: 0 10px 0 0;
            vertical-align: middle;
          }
        }
      }
      .g-el-icon-setting {
        font-size: 18px;
        color: $--app-header-font-color;
        @include flex-vertical-center($--app-header-height);
        padding: 0 10px;
        cursor: pointer;
      }
    }

    @mixin g-app__menu-child() {
      overflow: hidden auto;
      height: 100vh;
      width: calc(#{$--app-menu-width} + 17px);
    }

    @mixin g-app__menu-logo() {
      @include flex-center();
      height: $--app-header-height;
      color: $--app-menu-font-color;
      width: $--app-menu-width;
      white-space: nowrap;
      font-size: 16px;
      box-sizing: border-box;
      .g-logo-title {
        font-size: 20px;
        line-height: 55px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        margin-left: 10px;
        font-family: cursive;
      }
    }

    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: $---html-background-color !important;

    .g-app__body-left {
      &.g-app__menu {
        overflow: hidden;
        width: auto !important;
        .g-app__menu-horizontal {
          padding-top: 0 !important;
          width: fit-content !important;
          display: flex;
          height: 100% !important;
          .g-app__menu-child-side {
            width: 65px;
            flex-shrink: 0;
            height: inherit;
            .g-logo__wrap {
              height: $--app-header-height;
              display: flex;
              align-items: center;
              justify-content: center;
              background: $--app-menu-side-bg;
            }
            .g-app__menu-side-inner {
              height: calc(100vh - #{$--app-header-height});
              .el-scrollbar__wrap {
                background: $--app-menu-side-bg;
                ul {
                  li {
                    cursor: pointer;
                    width: 65px;
                    height: 65px;
                    color: #fff;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    i {
                      display: inline-block;
                      //height: 2.2em;
                      font-size: 18px;
                      line-height: 26px;
                      padding-bottom: 1px;
                    }
                    p {
                      padding: 0 3px 0;
                      width: 100%;
                      min-height: 1.1em;
                      max-height: 2.2em;
                      line-height: 1.1;
                      @include text-ellipsis--muti(2);
                    }
                    &.g-side-inner__item {
                    }
                    &.g-side-inner__item--active {
                      background: rgb($--color-primary, 0.8);
                    }
                  }
                }
              }
            }
          }
          .g-app__menu-child-side-2 {
            height: inherit;
            width: $--app-menu-width;
            transition: 0.3s;
            .g-app__menu-side-x5qron3c {
              height: $--app-header-height;
              display: flex;
              align-items: center;
              border: 1px solid #ebeef5;
              padding: 0 20px;
              font-size: 17px;
              color: #3c4a54;
              @include text-ellipsis--muti(1);
            }
            .g-app__menu-child-side-2-inner {
              height: calc(100vh - #{$--app-header-height});
              overflow-y: auto;
              border-right: solid 1px #ebeef5;
            }
          }
        }

        &.g-app__menu-is-collapse {
          .g-app__menu-child-side-2 {
            width: $--app-menu-width-is-collapse;
          }
          .g-app__menu-child-side-2-inner {
            height: calc(100vh) !important;
            overflow-x: hidden;
          }
        }
      }
    }

    .g-app__body-right {
      .g-app__header {
        @include g-app__header();
        .g-app__header-left {
          @include g-app__header-left();
        }
        .g-app__header-right {
          @include g-app__header-right();
        }
      }
    }

    .g-app__menu {
      width: $--app-menu-width;
      flex-shrink: 0;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
      background: #fff;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      z-index: 100;
      .g-app__menu-child {
        overflow: hidden auto;
        height: calc(100vh - #{$--app-header-height});
        width: calc(#{$--app-menu-width} + 17px);
        box-sizing: border-box;
        padding: 5px 0 10px 0;
        .el-menu {
          border: none;
        }
        .el-menu--collapse {
          .el-submenu.is-active {
            & > .el-submenu__title {
              i {
                // 图标
                color: $--color-primary;
                font-weight: bold;
              }
            }
          }
        }
      }
    }

    .main__content {
      overflow: hidden auto;
      height: calc(100vh - #{$--app-header-height} - #{$--app-nav-height} - #{$--app-footer-height});
      box-sizing: border-box;
      padding: 4px 12px 0;
      position: relative;
      width: 100%;
      .router-view {
        min-height: inherit;
        border-radius: 3px;
        //box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        position: relative;
      }
    }
    //.router-view--full {
    //  height: calc(100vh - #{$--app-header-height} - #{$--app-nav-height} - #{$--app-footer-height} - 10px);
    //}
  }

  /*menu弹出框*/
  .el-menu--popup {
    padding: 7px 0;
    .el-submenu,
    .el-menu-item {
      z-index: 1;
      height: $--app-menu-height;
      line-height: $--app-menu-height;
      position: relative;
      color: #333;
      margin: 0 10px;
      border-radius: 5px;
      box-sizing: border-box;
      min-width: auto;
      .el-submenu__icon-arrow {
        margin-top: -5px;
      }
    }

    .el-submenu + .el-submenu .el-menu-item + .el-menu-item,
    .el-menu-item + .el-submenu,
    .el-submenu + .el-menu-item {
      margin: 7px 10px;
    }

    .el-submenu {
      padding: 0 !important;
      &.is-active {
        color: $--color-primary;
        .el-submenu__title {
          color: $--color-primary;
          & > i {
            color: $--color-primary;
          }
        }
      }
      .el-submenu__title {
        border-radius: 5px;
        height: $--app-menu-height;
        line-height: $--app-menu-height;
        padding: 0 10px !important;
        &:hover {
          background: $--color-primary;
          color: #fff;
          & > i {
            color: #fff;
          }
        }
      }
    }
    .el-menu-item {
      padding: 0 10px !important;
      &.is-active {
        background: $--color-primary;
        color: #fff !important;
        i {
          color: #fff;
        }
      }
      &:hover {
        background: $--color-primary;
        color: #fff;
        i {
          color: #fff;
        }
      }
    }
  }
}
